<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮</button>
    <ul>
      <li>11</li>
      <li>22</li>
      <li>33</li>
    </ul>
    <script>
      //箭头函数注意点
      //一.箭头函数里的this
      //箭头函数内部没有this绑定,他的this是上层上下文的this

      document.querySelector("button").onclick = function () {
        console.log("this1", this); //指向事件源 button
        setTimeout(function () {
          console.log("this2", this);
          //定时器里面this指向window
          var obj = {
            name: "张三",
            fn: function () {
              console.log("this3", this); //指向对象本身
            },
          };
          obj.fn();
        }, 1000);
      };

      //改成箭头函数版本
      //最里面一层对象里的函数
      document.querySelector("button").onclick = function () {
        console.log("this1", this); //button
        setTimeout(function () {
          console.log("this2", this); //window
          var obj = {
            name: "张三",
            fn: () => {
              console.log("this3", this); //本来指对象本身,改箭头函数之后指向上一层的this2指向,为window
            },
          };
          obj.fn();
        }, 1000);
      };
      //改定时器为箭头函数
      document.querySelector("button").onclick = function () {
        console.log("this1", this); //button
        setTimeout(() => {
          console.log("this2", this); //指向this1 为button
          var obj = {
            name: "张三",
            fn: () => {
              console.log("this3", this); //指向this2的指向,为button
            },
          };
          obj.fn();
        }, 1000);
      };

      //改最外层为箭头函数
      document.querySelector("button").onclick = () => {
        console.log("this1", this); //window
        setTimeout(() => {
          console.log("this2", this); //window
          var obj = {
            name: "张三",
            fn: () => {
              console.log("this3", this); //window
            },
          };
          obj.fn();
        }, 1000);
      }; //用全局的this

      //案例
      var btn = document.querySelector("button");
      var lis = document.querySelectorAll("li");
      // btn.onclick = function () {
      //   var that = this;
      //   lis.forEach(function (li) {
      //     li.style.background = "red";
      //     // forEach循环里面this指向window
      //     that.style.background = "cyan";
      //   });
      // };
      //或者换成箭头函数  就不用在外部用var that = this了
      btn.onclick = function () {
        var that = this;
        lis.forEach((li) => {
          li.style.background = "red";
          // forEach循环里面this指向window
          this.style.background = "cyan";
        });
      };

      //二.箭头函数里没有隐藏参数

      //ES5处理不定参
      function fn() {
        //不定参 不确定形参里面要传入什么
        console.log(arguments);
      }
      fn(1, 2, 3);

      //ES6处理不定参(箭头函数)(没有arguments)
      var fn = (...args) => {
        //用剩余参数接收
        console.log(args);
      };
      fn(1, 2, 3);

      //三.箭头函数不能作为构造函数
      let fn = () => {
        this.name = name;
      };
      var zhangsan = new fn();
      console.log(zhangsan);

      //四.箭头函数作为事件函数的时候获取事件源
      // document.querySelector("button").onclick = function () {
      //   this.style.background = "red";
      // };
      document.querySelector("button").onclick = (e) => {
        e.target.style.background = "red";
      };
    </script>
  </body>
</html>
